<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        #app {
            border: 5px solid red;
            /* width: 600px;
            height: 300px; */
            margin: 0px auto;
            margin-top: 20px;
        }

        h2,
        table {
            text-align: center;

        }

        table {
            border: 2px solid black;
            width: 600px;
            height: 300px;
            margin-left: 30%;
        }

        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>学生信息列表</h2>
        <table cellspacing="0px">
            <tr>
                <th>学生编号</th>
                <th>学生姓名</th>
                <th>学生头像</th>
                <th>操作</th>
            </tr>
            <!-- 异步请求遍历的数据
            1.没有查询到合适的数据（也要在页面上提醒）

            2.有数剧遍历
            

            -->
            <tr v-if="stuInfoList==null||stuInfoList.length==0">
                <td colspan="4">没有数据</td>
            </tr>

            <!-- v-for='(变量1，变量2) in data里面的变量名' -->
            <template v-else>
                <tr v-for="(stu,index) in stuInfoList" :key="index">
                    <td>{{stu.id}}</td>
                    <td>{{stu.name}}</td>
                    <td>
                        <img :src="stu.img" alt="" style="width: 30px; height: 30px;">
                    </td>
                    <td>
                        <button @click="updateStuById(stu.id)">修改</button>
                        <button @click="deleteStuById(stu.id)">删除</button>
                    </td>
                </tr>
            </template>

        </table>

    </div>

</body>
<script>
    //使用vue相关的技术来遍历stuarr里面的信息  展示页面
    let studentArray = [{
            "id": 1,
            "name": "坤",
            img: "./img/11.jpg"
            // Image:"20231213224954.jpg"
        },
        {
            "id": 2,
            "name": "凡",
            img: "./img/11.jpg"
            // Image:"20231213224954.jpg"
        },
        {
            "id": 3,
            "name": "峰",
            img: "./img/11.jpg"
            // Image:"11.jpg"
        },
        {
            "id": 4,
            "name": "希",
            img: "./img/22.jpg"
            // Image:"11.jpg"
        }
    ];
    new Vue({
        data() {
            return {
                stuInfoList: [],
            }

        },
        methods: {

            deleteStuById(sid) {
                if (confirm("确定要删除吗？" + sid)) {
                    let index;
                    this.stuInfoList.forEach((stu, idx) => {
                        if (stu.id === sid) {
                            index = idx;
                        }
                    });
                    this.stuInfoList.splice(index, 1);
                }
            },
            updateStuById(sid) {
                // alert("22")
                //先修改学生的姓名

                let newStuName = prompt("录入学生的name");
                // let updateObj = this.stuInfoList.filter(function () {
                //     return stu.id === sid;
                // })[0];
                // console.log(array);
                // let updateStuObj=this.stuInfoList.filter(stu=>stu.id===sid);
                // updateStuObj.name=newStuName;
                // console.log(updateStuObj);
                // this.stuInfoList.indexof();
                let index;
                this.stuInfoList.forEach((stu, i) => {
                    if (sid === stu.id) {
                        index = i;
                    }
                })
                this.stuInfoList[index].name = newStuName;


            },
            //应该是在浏览器 只要请求查询List。html页面的内容，就立马执行
            queryStudentInfo() {
                //发起异步请求
                let studentArray = [{
                        "id": 1,
                        "name": "坤",
                        img: "./img/11.jpg"
                        // Image:"20231213224954.jpg"
                    },
                    {
                        "id": 2,
                        "name": "凡",
                        img: "./img/22.jpg"
                        // Image:"20231213224954.jpg"
                    },
                    {
                        "id": 3,
                        "name": "峰",
                        img: "./img/11.jpg"
                        // Image:"11.jpg"
                    },
                    {
                        "id": 4,
                        "name": "希",
                        img: "./img/22.jpg"
                        // Image:"11.jpg"
                    }
                ];
                this.stuInfoList = studentArray;
            }

        },
        created() {
            //创建vue示例对象之后立马执行钩子函数
            this.queryStudentInfo();

        },

    }).$mount("#app");
</script>

</html>